<template>
	<view>
		<up-popup :show="show" mode="center" :round="10" @open="handleOpen">
			<view class="msg_content_wrap">
				<view class="title">{{config.title || '提示'}}</view>
				<!-- 普通输入框 -->
				<view class="input" v-if="config.isInput">
					<input 
						type="text" 
						v-model.trim="value" 
						:placeholder="config.placeholder?config.placeholder:'请输入'" />
				</view>
				<!-- 加减数字输入框 -->
				<view class="number_input" v-else-if="config.isNumberInput && show">
					<custom-number-box 
						v-model="value" 
						:max="config.max"
						:placeholder="config.placeholder?config.placeholder:'请输入'" />
					<!-- 最大输入提示 -->
					<view class="max_hint" v-if="config.maxHintText">
						{{ config.maxHintText }}
					</view>
				</view>
				<view class="msg" v-else>{{ config.message }}</view>
				<view class="btn_wrap">
					<view 
						class="btn cancel" 
						hover-class="cancel_hover" 
						:hover-stay-time="200" 
						v-if="config.showCancel" 
						@click="handleCancel">取消</view>
					<view
						class="btn cancel cart" 
						hover-class="cancel_hover" 
						:hover-stay-time="200" 
						v-if="config.showCart" 
						@click="handleCart">返回购物车</view>
					<button 
						size="default" 
						type="default" 
						class="btn confirm" 
						hover-class="confirm_hover" 
						:hover-stay-time="200" 
						v-if="config.showConfirm" 
						@click="handleConfirm" 
						:loading="btnLoading">{{config.confirmText || '确定'}}</button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref,defineProps,defineEmits,watch } from 'vue'
	
	const btnLoading = ref(false)
	const value = ref(null)
	
	const props = defineProps({
		show:{
			type:Boolean,
			default:()=>{
				return false
			}
		},
		config:{
			type:Object,
			default:()=>{
				return {}
			}
		}
	})
	
	watch(()=>props.show,(newVal,oldVal)=>{
		console.log('newVal:'+newVal)
		if(!newVal)btnLoading.value = false;
	})
	
	const handleOpen = ()=>{
		btnLoading.value = false
	}
	
	const emits = defineEmits(['cancel','confirm'])
	// 取消
	const handleCancel = ()=>{
		emits('cancel',props.data)
	}
	// 确认
	const handleConfirm = ()=>{
		if(btnLoading.value)return;
		if((props.config.isInput||props.config.isNumberInput) && !value.value)return;
		btnLoading.value = true
		emits('confirm',{...props.config.data,value:value.value})
	}
	// 返回购物车
	const handleCart = ()=>{
		emits('confirm',{...props.config.data,value:value.value})
	}
</script>

<style lang="scss">
	.msg_content_wrap{
		width: 500rpx;
		padding:0 30rpx;
		.title{
			color: #333333;
			font-size: 36rpx;
			text-align: center;
			padding-top: 30rpx;
			font-weight: bold;
		}
		.input{
			width: 480rpx;
			height: 80rpx;
			border-radius: 10rpx;
			background: #F6F6F6;
			margin: 0 auto;
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			input{
				padding-left: 20rpx;
				font-size: 28rpx;
				color:#666;
			}
			.input-placeholder{
				font-size: 28rpx;
				color: #BBBBBB;
			}
		}
		.number_input{
			margin-top: 40rpx;
		}
		.max_hint{
			text-align: center;
			padding-top: 24rpx;
			font-size: 28rpx;
			color: #F5564D;
		}
		.msg{
			color: #666666;
			font-size: 36rpx;
			text-align: center;
			padding-top: 40rpx;
		}
		.btn_wrap{
			display: flex;
			justify-content: center;
			padding: 60rpx 0 30rpx;
			.btn{
				width: 190rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align:  center;
				border-radius: 120rpx;
				font-size: 32rpx;
				padding: 0;
				margin: 0;
			}
			.cancel{
				background: #FFF0F0;
				color: #F5564D;
				margin-right: 60rpx;
			}
			.cart{
				width: 256rpx;
				margin-right: 0rpx;
			}
			.confirm{
				background: #F5564D;
				color: #FFFFFF;
			}
		}
	}
</style>